<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>系统常态化运行评分系统</title>
    <link rel="stylesheet" href="../component/pear/css/pear.css" />
    <style>
        .expand.pear-btn:hover {
            color: currentColor;
            background: none;
        }
        .icon-preview {
            font-size: 30px !important;
            cursor: pointer;
        }
        .layui-table-box button {
            font-size: 12.5px !important;
            float: left;
            margin-right: 5px; /* 根据需要调整间距 */
        }
    </style>
</head>

<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-table-box">
            <button id="btnUploadZz" class="pear-btn pear-btn-primary pear-border-blue pear-btn-xs" title="上传佐证材料！">
                <i class="layui-icon layui-icon-upload"></i>
                上传佐证材料
            </button>
        </div>
        <table id="user-table" lay-filter="user-table"></table>
    </div>
</div>

<script type="text/html" id="pictureUrl">  
    <div id="pictureUrl">
        {{# if(d.pictureUrl) { }}
        {{# let picList = d.pictureUrl.split(','); }}
        {{# for(let i = 0; i < picList.length; i++) { }}
            <i class="layui-icon layui-icon-picture-fine icon-preview" 
            data-allData="{{ picList }}" 
            data-index="{{ i }}"
            data-type="1"
            lay-event="lay-preview"></i>
        {{# } }}
        {{# } }}
    </div>
</script>

<script type="text/html" id="fileUrl">  
    <div id="fileUrl">
        {{# if(d.fileUrl) {  }}
        {{# var fileList = d.fileUrl.split(','); }}
        {{# for(let i = 0; i < fileList.length; i++) { }}
            <i class="layui-icon layui-icon-file icon-preview" 
            data-allData="{{ fileList }}" 
            data-index="{{ i }}"
            data-type="2"
            lay-event="lay-preview"></i>
        {{# } }}
        {{# } }}
    </div>
</script>

<script type="text/html" id="videoUrl">  
    <div id="videoUrl">
        {{# if(d.videoUrl) { }}
        {{# let videoList = d.videoUrl.split(','); }}
        {{# for(let i = 0; i < videoList.length; i++) { }}
            <i class="layui-icon layui-icon-video icon-preview" 
            data-allData="{{ videoList }}" 
            data-index="{{ i }}"
            data-type="3"
            lay-event="lay-preview"></i>
        {{# } }}
        {{# } }}
    </div>
</script>
<script type="text/html" id="audioUrl">  
    <div id="audioUrl">
        {{# if(d.audioUrl) { }}
        {{# let audioList = d.audioUrl.split(','); }}
        {{# for(let i = 0; i < audioList.length; i++) { }}
            <span class="layui-icon layui-icon-play icon-preview" 
            data-allData="{{ audioList }}" 
            data-index="{{ i }}"
            data-type="4"
            lay-event="lay-preview"></span>
        {{# } }}
        {{# } }}
    </div>
</script>


<script src="../component/layui/layui.js"></script>
<script src="../component/pear/pear.js"></script>
<script src="../scripts/utils/request.js"></script>
<script src="../scripts/utils/auth.js"></script>
<script>
    var $,table,form,drawer,popup,notice;

    function refreshTable(){
        table.reload('user-table')
    }

    layui.use(['table', 'form', 'jquery', 'drawer', 'popup','notice'], function() {
        table = layui.table;
        form = layui.form;
        $ = layui.jquery;
        drawer = layui.drawer;
        popup = layui.popup;
        notice = layui.notice;

        var pfId=getUrlParams("pfId");
        if(pfId===undefined||pfId===null||pfId===""){
            notice.error("加载参数错误！");
            return;
        }
        var codeId=getUrlParams("codeId");
        if(codeId===undefined||codeId===null||codeId===""){
            codeId=null;
        }
        var zbDetailsId=getUrlParams("zbDetailsId");
        if(zbDetailsId===undefined||zbDetailsId===null||zbDetailsId===""){
            notice.error("加载参数错误！");
            return;
        }
        var mineId=getUrlParams("mineId");
        if(mineId===undefined||mineId===null||mineId===""){
            notice.error("加载参数错误！");
            return;
        }
        var roleType=localStorage.getItem("roleType");
        if(roleType!=4){
            $('.layui-table-box').hide();
        }

        function getCols(){
            if(roleType!=4){
                return [[
                {field: 'recordTime', minWidth:200, align:'center', title: '记录时间'},
                {field: 'recordType', minWidth:100, align:'center', title: '记录方式'},
                {field: 'pictureUrl', minWidth: 130,align:'center',  title: '图片',templet:"#pictureUrl"},
                {field: 'fileUrl', minWidth: 130, align:'center',  title: '文件',templet:"#fileUrl"},
                {field: 'audioUrl',minWidth: 130, align:'center',   title: '音频',templet: '#audioUrl'},
                {field: 'videoUrl',minWidth: 130, align:'center',   title: '视频',templet:"#videoUrl"},
            ]];
            }else{
                return [[
                {field: 'recordTime', minWidth:200, align:'center', title: '记录时间'},
                {field: 'recordType', minWidth:100, align:'center', title: '记录方式'},
                {field: 'pictureUrl', minWidth: 130,align:'center',  title: '图片',templet:"#pictureUrl"},
                {field: 'fileUrl', minWidth: 130, align:'center',  title: '文件',templet:"#fileUrl"},
                {field: 'audioUrl',minWidth: 130, align:'center',   title: '音频',templet: '#audioUrl'},
                {field: 'videoUrl',minWidth: 130, align:'center',   title: '视频',templet:"#videoUrl"},
                {
                    title: '操作',
                    align:'center',
                    minWidth: 180,
                    templet: function (d) {
                        var html="";
                        if(d.createId==localStorage.getItem("userId")){
                            html += '<button class="pear-btn pear-btn-md pear-btn-primary pear-border-blue pear-btn-xs" lay-event="lay-zz-modify"><i class="layui-icon layui-icon-edit"></i>修改</button>';
                            html += '<button class="pear-btn pear-btn-md pear-btn-danger pear-border-blue pear-btn-xs" lay-event="lay-zz-delete"><i class="layui-icon layui-icon-delete"></i>删除</button>';
                        }
                        return html;
                    }
                }
                ]]
            }
        }


        table.render({
            id:"user-table",
            elem: '#user-table',
            url: baseURL+'/api/cl/getZbDetailsClList',
            method:'post',
            contentType: 'application/json',
            limit: 15,
            limits: [10, 15, 20],
            page: true,
            loading:true,
            headers: {
                token: localStorage.getItem("token")
            },
            where:{
                zbDetailsCodeId:codeId,
                zbDetailsId:zbDetailsId,
                mineId:mineId
            },
            cols:getCols(),
            skin: 'grid',
            toolbar: false,
            defaultToolbar: false,
            done: function(res, curr, count) {
                validToken(res);
            }
        });

        table.on('tool(user-table)', function (obj) {
            var data = obj.data;
            if(obj.event=="lay-preview"){
                var type=$(this).attr("data-type");
                var allData = $(this).attr("data-allData");
                var index = $(this).attr("data-index");
                if(type==1){
                    previewPhoto(allData,index);
                }else if(type==2){
                    previewFile(allData,index);
                } else if(type==3){
                    previewVideo(allData,index);
                } else if(type==4){
                    previewAudio(allData,index);
                }else{
                    notice.error("未知的文件类型！");
                }
            }else if(obj.event=="lay-zz-modify"){
                layer.open({
                    type: 2,
                    title: '上传佐证材料修改(以下四种方式至少4选1)',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['800px', '600px'],
                    content: 'pfsystemdetailsClUploadModify.html?id='+data.id
                })
            }else if(obj.event=="lay-zz-delete"){
                layer.confirm('确定删除该条佐证资料数据？', function(index){
                    postAjax('/api/cl/deleteMinePfZb',{id:data.id},function(response){
                        table.reload("user-table");
                    },null);
                })
            }
        });
        window.previewPhoto = function(allData,index){
            var dataList=[];
            allData.split(",").forEach(function(item,index,array){
                dataList.push({
                    "alt": "图片佐证材料:"+index,
                    "pid": index,
                    "src": item,
                });
            });
            layer.photos({
                photos: {
                  "title": "图片佐证材料",
                  "start": index,
                  "data": dataList
                }
              });
        }

        window.previewFile = function(allData,index){
            var fileUrl=allData.split(",")[index];
            window.open(fileUrl,'_blank');
        }

        window.previewVideo = function(allData,index){
            var videoUrl=allData.split(",")[index];
            layer.open({
                type: 1,
                title: '视频佐证材料:'+index, // 标题
                area: ['800px', '600px'], // 宽高
                content: "<video width='100%'' height='100%'' controls><source src='"+videoUrl+"' type='video/mp4'>您的浏览器不支持播放视频</video>"
              });
        }

        window.previewAudio = function(allData,index){
            var audioUrl=allData.split(",")[index];
            layer.open({
                type: 1,
                title: '音频佐证材料:'+index, // 标题
                area: ['800px', '600px'], // 宽高
                content: "<audio  width='100%'' height='100%'' controls><source src='"+audioUrl+"' type='audio/mp3'>您的浏览器不支持播放视频</audio>"
              });
        }


        $('#btnUploadZz').click(function () {
            layer.open({
                type: 2,
                title: '上传佐证材料(以下四种方式至少4选1)',
                shadeClose: true,
                shade: false,
                maxmin: true, //开启最大化最小化按钮
                area: ['800px', '600px'],
                content: 'pfsystemdetailsClUpload.html?codeId='+codeId+'&zbDetailsId='+zbDetailsId+'&mineId='+mineId+'&pfId='+pfId
            })
        });

    })
</script>
</body>

</html>
